<template>
<!--参考地址：https://zhuanlan.zhihu.com/p/435008194  -->
  <div>
    <div class="player-container" style="width: 400px;height: 300px">
      <vue-core-video-player  :src="videoSource" :cover="cover" :title= "title"  autoplay loop="true"/>
    </div>
    <div style="width: 400px;height: 300px">
<!--      <video poster="./11.jpg" src="./11色彩搭配.mp4" type="video/mp4" width="100%" height="100%" controls  id="videoPlayer"></video>-->
    </div>
    <el-button type="primary" @click="getTime">按钮</el-button>
  </div>

</template>

<script>
export default {
  name: 'app',
  data() {
    return {
        //  {
      //   src: 'https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4',
      //   resolution: 720,
      // }, {
      //   src: 'https://media.vued.vanthink.cn/y2mate.com%20-%20sparkle_your_name_amv_K_7To_y9IAM_1080p.mp4',
      //   resolution: 1080
      // }
      cover : "https://img1.wxzxzj.com/vpc-example-cover-your-name-c.png",
      title : "你的名字",
      videoSource: [{
        // src: require('@/assets/video/11色彩搭配.mp4'),
        resolution: 360,
      }],
    }
  },
  methods:{
    progressUpdate(){
        let video = document.getElementById("videoPlayer");

      //   //动态设置进度条
      // let postionBar = document.getElementById("positionBar");
      //   postionBar.style.width = (video.currentTime / video.duration * 100) + "%";

      console.log("video.currentTime :",video.currentTime )
      console.log("video.duration :",video.duration )
        //设置播放时间
        //displayStatus.innerHTML = (Math.round(video.currentTime*100)/100) + "秒";
      },
    getTime(){
      this.progressUpdate() ;
    }
  }
}
</script>

<!--

<template>
  <transition :name="effect">
    <div class="video-main" v-if="status" >
      <div class="video-box" @click.self="close">

        <div class="video-body">
          <div class="video-header clearfix">
            <b role="button" class="video-close" @click.stop="close">×</b>
          </div>
          &lt;!&ndash; 普通视频 &ndash;&gt;
          <video-player  ref="videoPlayer" :playsinline="true"
                         :options="playerOptions" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)"
                         @ended="onPlayerEnded($event)" @loadeddata="onPlayerLoadeddata($event)"
                         @waiting="onPlayerWaiting($event)" @playing="onPlayerPlaying($event)"
                         @timeupdate="onPlayerTimeupdate($event)" @canplay="onPlayerCanplay($event)"
                         @canplaythrough="onPlayerCanplaythrough($event)" @ready="playerReadied"
                         @statechanged="playerStateChanged($event)" v-if="playerOptions.sources[0].src"></video-player>
          &lt;!&ndash; <video
              class="video"
              :src="url"
              webkit-playsinline
              playsinline
              controls=""
              :muted="false"
              preload="meta"
              autoplay="false"
              loop="false"
              ref="video"
              v-if="url"
          ></video> &ndash;&gt;
          &lt;!&ndash; YouTube视频 &ndash;&gt;
          <iframe
              id="ytplayer"
              type="text/html"
              :width="isMobile ? '100%' : '1280'"
              :height="isMobile ? setHight : '720'"
              frameborder="0"
              :src="youtube"
              allowfullscreen
              v-if="youtube"
          />
        </div>
      </div>
    </div>
  </transition>
</template>

<script>

import {
  videoPlayer
} from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
export default {
  name: 'videoTwo',
  data () {
    return {
      effect: 'fade-in',
      status: false,
      url: '',
      youtube: '',
      isMobile: false,
      setHight: 0,

      id: 1,
      playTime: '0',
      arrplayTime: [],

      paused: true,
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: true, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          // src: '../../static/video/test.mp4', // 路径
          src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
          // type: 'video/mp4' // 类型
        }],
        poster: '', // 你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      }
    }
  },
  components: {
    videoPlayer
  },
  computed: {

  },
  methods: {
    play (id,url) {
      this.id = id
      this.open()
      // url必填
      if(!url) {
        //console.log('video url is required.')
        return
      }

      // 写入url
      let youtube_short = url.match(/https?:\/\/youtu\.be\/(.*)/),
          youtube_long = url.match(/https?:\/\/www.youtube\.com\/watch\/?\?(.*)/),
          youtube_embed = /https?:\/\/www.youtube\.com\/embed\/.+?/.test(url)

      if(youtube_short) {
        // 短链接提取id
        this.youtube = `https://www.youtube.com/embed/${youtube_short[1]}`
      }
      else if(youtube_long) {
        // 长链接提取id
        let search = youtube_long[1]
        search.replace(/([^=]*)=([^&]*)&?/g, function(str, key, val) {
          if(key === 'v') {
            this.youtube = `https://www.youtube.com/embed/${decodeURIComponent(val).replace(/</g, "&lt;").replace(/>/g, "&gt;")}`
          }
        })
      } else if(youtube_embed) {
        // 内嵌专用链接
        this.youtube = url
      } else {
        this.playerOptions.sources[0].src = url
      }

      // 弹出
      this.show()
    },
    show () {
      this.status = true
      this.changeEffect('fade-out')
    },
    open() {
      let arrplayTime = sessionStorage.getItem("arrplayTime")
      arrplayTime = JSON.parse(arrplayTime)
      if (arrplayTime != null && arrplayTime.length != 0) {
        this.arrplayTime = arrplayTime
      }else{
        this.arrplayTime = []
      }
      if (this.arrplayTime != [] && this.arrplayTime.length != 0) {
        this.playTime = this.checkFn(this.id,this.arrplayTime)
      }else{
        this.playTime = 0
      }
    },
    close (e) {
      this.status = false
      this.playerOptions.sources[0].src = this.youtube = ''
      this.changeEffect('fade-in')

      let playtimes = {
        id: this.id,
        playtime: this.playTime
      }
      this.arrplayTime = this.formateArrObjData(this.arrplayTime,playtimes,'id')

      sessionStorage.setItem("arrplayTime", JSON.stringify(this.arrplayTime))


    },
    changeEffect (name) {
      setTimeout(() => {
        this.effect = name
      }, 3e2)
    },


    playerStateChanged(player) {
      // console.log(player);
    },
    //监听媒体是否已到达结尾，播放完

    //DOM元素上的readyState更改导致播放停止。
    onPlayerWaiting(player) {
      // console.log(player);
    },
    //媒体不再被禁止播放，并且已开始播放。
    onPlayerPlaying(player) {
      // console.log(player);
    },
    //当播放器在当前播放位置下载数据时触发
    onPlayerLoadeddata(player) {
      // console.log(player);
    },
    //当前播放位置发生变化时触发。
    onPlayerTimeupdate(player) {
      this.playTime = player.cache_.currentTime
      // console.log(player);
    },
    //媒体的readyState为HAVE_FUTURE_DATA或更高
    onPlayerCanplay(player) {
      // console.log('player Canplay!', player)
    },
    //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
    onPlayerCanplaythrough(player) {
      // console.log('player Canplaythrough!', player)
    },
    //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
    playerReadied(player) {
      // seek to 10s
      //console.log('example player 1 readied', player);
      player.currentTime(this.playTime)

      // console.log('example 01: the player is readied', player)
    },
    onPlayerPlay(player) {
      this.paused = false
      // console.log('onPlayerPlay!', player)
    },
    onPlayerPause(player) {
      this.paused = true
      // console.log('onPlayerPause!', player)
    },
    onPlayerEnded(player) {
      this.paused = false
      //console.log('player ended!', player)
    },

    //判断num在objarr里，拿到obj的另一个参数
    checkFn(num, objArr) {
      let times = 0
      if (!(objArr instanceof Array)) {
        times = 0						//'请传入正确格式的数组'
      }

      objArr.forEach(function (item) {
        if (item.id == num) {
          times = item.playtime
          return false;
        }
      })
      return times
    },
    //判断对象数组中是否有某个对象，有则替换无则添加
    formateArrObjData(initialArr, obj, pro) {
      // 判定数据是否为数组
      if (!(initialArr instanceof Array)) {
        return 	[]						//'请传入正确格式的数组'
      }
      // 判定数据是否为对象
      if (!(obj instanceof Object)) {
        return 	[]						//'请传入正确格式的对象'
      }
      if (!pro) {
        return 	[]						//'请传入正确格式的属性名'
      }

      let index = initialArr.findIndex((val) => val[pro] === obj[pro])
      let tempArr = initialArr
      // 如果有就替换  没有就添加
      if (initialArr.findIndex((val) => val[pro] === obj[pro]) !== -1) {
        tempArr.splice(index, 1, obj);
      } else {
        tempArr.push(obj);
      }
      return tempArr
    },

  },
  mounted() {
    let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
    let setSize = () => {
      this.setHight = document.documentElement.clientHeight
    }
    window.addEventListener(resizeEvt, setSize, false)
    setSize()

  },

}
</script>

<style lang="scss">
.video-player {
  display: table;
  width: 900px;
  height: 450px;
  position: fixed;
  top: 200px;
  left: 486px;
  font-size: 36px;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 100;
  .video-js .vjs-big-play-button {
    position: absolute;
    top: 45%;
    left: 45%;
  }
}
.video-main {
  display: table;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  font-size: 36px;
  background-color: rgba(0,0,0,0.25);
  z-index: 100;
  .video-box {
    display: table-cell;
    height: auto;
    vertical-align: middle;
    // padding-top: 20px;
    position: relative;
    max-height: 80%;
    .video-body {
      width: 1300px;
      margin: auto;
    }
    .video-header {
      display: table;
      width: 1px;
      height: 1px;
      position: fixed;
      margin: 8px 8px;
      top: 142px;
      left: 1330px;
      font-size: 36px;
      background-color: rgba(0, 0, 0, 0.25);
      z-index: 100;
    }
    .video-close {
      float: right;
      width: 48px;
      line-height: 48px;
      text-align: center;
      font-size: 100%;
      font-weight: 100;
      color: #fff;
      background-color: #000;
      transition: background-color 0.25s, color 0.25s;
      cursor: pointer;
      &:hover {
        color: #f56c6c;
        background-color: #fff;
      }
    }
    .video-body{
      max-height: 88%;
    }
    .video {
      width: 100%;
      max-height: 100%;
    }
  }
}
</style>-->
